<!-- 登陆页面 -->
<template>
  <div id="buyDetail">
    <div class="container">
      <div class="info-main">
        <div class="info-left">
          <template v-if="imgs.length">
            <div
              class="swiper-container gallery-top">
              <div class="swiper-wrapper">
                <div
                  v-for="(item, index) in imgs"
                  :key="index"
                  class="swiper-slide"
                  :style="{backgroundImage:'url(' + item.imgAddr + ')'}" />
              </div>
              <!-- Add Arrows -->
              <div class="swiper-button-next swiper-button-white" />
              <div class="swiper-button-prev swiper-button-white" />
            </div>
            <div
              class="swiper-container gallery-thumbs">
              <div class="swiper-wrapper">
                <div
                  v-for="(item, index) in imgs"
                  :key="index"
                  class="swiper-slide"
                  :style="{backgroundImage:'url(' + item.imgAddr + ')'}" />
              </div>
            </div>
          </template>
        </div>
        <div class="info-right">
          <h2 class="title-box">
            {{ carDetail.fullName }}
            <span class="labels baomai">严选车</span>
            <span class="labels">降价急售</span>
            <span class="labels">0过户</span>
          </h2>
          <ul class="car-assort">
            <li>
              <span>{{ carDetail.year }}</span>上牌时间
            </li>
            <li>
              <span>{{ carDetail.kilo }}万</span>表显里程
            </li>
            <li>
              <span>{{ carDetail.shangpaiCity }}</span>上牌地
            </li>
            <li>
              <span>{{ carDetail.gearbox }}</span>变速箱
            </li>
          </ul>
          <p class="car-price">
            <span class="icon cd_preference" />
            <span class="cd_price">
              ￥{{ carDetail.ownerPrice }}万
            </span>
          </p>
          <div class="p-wly">
            <span class="p-wly-ico" />
            <span class="p-wly-l">三天无理由退车</span>
            <span class="p-wly-r">· 超值车辆专享</span>
          </div>
          <div class="info-op">
            <el-popover 
              popper-class="info-popver"
              placement="bottom-start"
              width="300"
              trigger="click">
              <el-button
                slot="reference"
                class="info-op-button b-phone">
                <i class="icon phone" />免费电话
              </el-button>
              <div class="content">
                <p class="content-desc">
                  请输入您的手机号，您将收到麻花客服顾问<br>010-123456789的免费来电，请注意接听。
                </p>
                <el-input v-model="carBookingStr.phone"
                          placeholder="请输入手机号码" />
                <!-- <div class="yanzhengma">
                  <el-input
                    class="yanzhengma-input"
                    placeholder="请输入验证码" />
                  <div class="yanzhengma-img" />
                </div> -->
                <el-button class="free-btn"
                           @click="bookingSale">
                  确定
                </el-button>     
              </div>
            </el-popover>
            <el-button class="info-op-button b-collection"
                       @click="addOrderOrCollectCar(0)">
              <i class="icon collection" />收藏车源
            </el-button>
            <el-button class="info-op-button b-order"
                       @click="addOrderOrCollectCar(1)">
              <i class="icon order" />立即下单
            </el-button>
          </div>
          <div class="p-top-rz">
            <span class="p-top-rz-title p-jp-bg"><i class="icon1" />麻花金牌认证 &gt;</span>
            <span>30天包退</span>
            <span class="p-dv-line" />
            <span>1年保修</span>
            <span class="p-dv-line" />
            <span>15大系统</span>
            <span class="p-dv-line" />
            <span>车价100%赔付</span>
            <span class="p-dv-line" />
            <span>全国联保</span>
          </div>
        </div>
      </div>
      <div class="info-baomai">
        <div class="baomai-detail">
          <h2 class="left-title">
            麻花严选车
          </h2>
          <ul>
            <li>车况更好</li>
            <li>价格公道</li>
            <li>百家门店</li>
            <li>当日提车</li>
          </ul>
        </div>
      </div>
      <div class="info-basic">
        <div class="basic-title">
          <span>基本信息</span>
        </div>
        <div class="basic-people">
          <span>车主：{{ carDetail.user.userTrueName }}</span>
        </div>
        <ul class="car-assort">
          <li>
            <span>{{ carDetail.year }}</span>上牌时间
          </li>
          <li>
            <span>{{ carDetail.kilo }}万公里</span>表显里程
          </li>
          <li>
            <span>{{ carDetail.shangpaiCity }}</span>上牌地
          </li>
          <li>
            <span>{{ carDetail.gearbox }}</span>变速箱
          </li>
          <li>
            <span>{{ carDetail.transferTimes }}次过户</span>登记证为准
          </li>
          <li>
            <span>{{ carDetail.city || '广州' }}</span>看车地点
          </li>
          <li>
            <span>{{ carDetail.asDate }}</span>年检到期
          </li>
        </ul>
      </div>
      <div class="info-basic">
        <div class="basic-title">
          <span>车辆图片</span>
        </div>
        <viewer
          v-if="imgs.length"
          :images="imgs"
          class="images-list">
          <div>
            <img
              v-for="(src,index) in imgs"
              :key="index"
              :src="src.imgAddr">
          </div>
        </viewer>
      </div>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper';
  import 'swiper/dist/css/swiper.min.css'; // 轮播图插件
  import { getCarDetail } from '@/api/caroperation';
  import { addCarBooking } from '@/api/carbooking';
  import { addOrder } from '@/api/order';

  export default {
    name: 'buyDetail',
    data() {
      return {
        carId: '',
        imgs: [],
        carDetail: {
          user: {},
        },
        carBookingStr: {
          phone: '',
        },
      };
    },
    watch: {
      $route: {
        immediate: true,
        handler(to, from) {
          this.carId = this.$route.query.id;
          this.getCarDetail(this.carId);
          setTimeout(() => {
            const galleryThumbs = new Swiper('.gallery-thumbs', {
              spaceBetween: 10,
              slidesPerView: 4,
              loop: true,
              freeMode: true,
              loopedSlides: 5, // looped slides should be the same
              watchSlidesVisibility: true,
              watchSlidesProgress: true,
            });
            const galleryTop = new Swiper('.gallery-top', {
              spaceBetween: 10,
              loop: true,
              loopedSlides: 5, // looped slides should be the same
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
              },
              thumbs: {
                swiper: galleryThumbs,
              },
            });
          }, 500);
        },
      },
    },
    methods: {
      getCarDetail(carId) {
        getCarDetail({ carId }).then(data => {
          if (data.success) {
            this.carDetail = data.car;
            this.imgs = data.car.carImageList.map(item => {
              item.imgAddr = item.imgAddr.split('@')[0];
              return item;
            });
          }
        });
      },
      addOrderOrCollectCar(type) {
        // type 为0收藏 1下单
        const params = {
          carStr: {
            id: this.carId,
          },
          orderInfoStr: {
            orderState: type,
          },
        };
        addOrder(params).then(data => {
          if (!data.success) {
            this.$message.warning(data.errMsg);
            return;
          }
          if (type == 0) {
            this.$message.success('收藏成功，请前往收藏夹查看');
          } else {
            this.$message.success('下单成功，请前往我的-查看订单查看');
          }
        });
      },
      bookingSale() {
        const { phone } = this.carBookingStr;
        if (!phone) {
          this.$message.error('手机号不能为空!');
          return;
        }
        if (!/^\d{11}$/.test(phone)) {
          this.$message.error('手机号码格式不正确!');
          return;
        }
        const carBookingStr = {
          phone,
        };
        addCarBooking({ carBookingStr }).then(data => {
          if (data.success) {
            this.$alert('预约成功，稍后将会有工作人员与您联系，请保持电话畅通，谢谢！', '提示', {
              type: 'success',
              center: true,
              showConfirmButton: false,
              callback: () => { },
            });
          }
        });
      },
    },
  };
</script>

<style lang='scss' scoped>
.info-popver {
  .content {
    .content-desc {
      font-size: 14px;
      color: #333;
      margin: 16px 0;
      line-height: 20px;
      letter-spacing: 1px;
    }
    .yanzhengma {
      margin: 0.2rem 0;
      position: relative;
      .yanzhengma-input {
        width: 2rem;
      }
      .yanzhengma-img {
        position: absolute;
        bottom: 0;
        display: inline-block;
        width: 1.2rem;
        height: 0.4rem;
        border: 1px solid #eee;
      }
    }
    .free-btn {
      margin-top: 0.2rem;
      width: 3.32rem;
      background-color: #ff5837;
      color: #fff;
      border-radius: 3px;
      font-size: 16px;
      letter-spacing: 5px;
    }
  }
}
#buyDetail {
  .container {
    width: 12rem;
    margin: 0.5rem auto;
    background: #fff;
    .icon {
      background-image: url(//s4.xinstatic.com/static/newcar-www/imgs/cardetail/op-name1x_a300304.png);
    }
    .icon1 {
      background-image: url(//s5.xinstatic.com/static/newcar-www/pkg/car_z_8f1bd46.png);
    }
    .info-main {
      display: flex;
      margin-bottom: 0.5rem;
      .info-left {
        flex: 1;
        min-width: 3rem;
        height: 4rem;
        .swiper-container {
          width: 100%;
          height: 3rem;
          margin-left: auto;
          margin-right: auto;
        }
        .swiper-slide {
          background-size: cover;
          background-position: center;
        }
        .gallery-top {
          height: 80%;
          width: 100%;
        }
        .gallery-thumbs {
          height: 20%;
          box-sizing: border-box;
          padding: 0.1rem 0;
          .swiper-slide {
            height: 100%;
            opacity: 0.7;
          }
          .swiper-slide-thumb-active {
            opacity: 1;
          }
        }
      }
      .info-right {
        flex: 1;
        height: 4rem;
        padding-left: 36px;
        .title-box {
          display: inline-block;
          color: #495056;
          font-size: 24px;
          font-weight: 400;
          line-height: 30px;
          padding-top: 7px;
          max-height: 60px;
          overflow: hidden;
          margin-bottom: 22px;
          .labels {
            display: inline-block;
            padding: 0 7px;
            height: 24px;
            line-height: 24px;
            color: #7a838d;
            font-size: 14px;
            text-align: center;
            background-color: #f6f6f6;
            border-radius: 2px;
            margin-right: 3px;
            vertical-align: top;
            margin-top: 3px;
          }
          .baomai {
            color: #d7a844;
            background: #fcf2d5;
          }
        }
        .car-assort {
          display: flex;
          li {
            position: relative;
            flex: 1;
            text-align: center;
            color: #a5abb2;
            line-height: 24px;
            font-size: 12px;
            &:not(:last-child)::after {
              content: "";
              width: 1px;
              height: 34px;
              background-color: #e6e6e6;
              position: absolute;
              right: 0;
              top: 5px;
            }
            span {
              display: block;
              color: #495056;
              font-size: 18px;
              padding-bottom: 3px;
            }
          }
        }
        .car-price {
          padding: 0.2rem 0;
          margin-left: 0.3rem;
          .cd_preference {
            display: inline-block;
            background-position: 0 -391px;
            background-repeat: no-repeat;
            font-size: 14px;
            width: 90px;
            height: 34px;
            text-align: center;
            vertical-align: top;
          }
          .cd_price {
            display: inline-block;
            height: 34px;
            line-height: 34px;
            margin-left: 10px;
            color: #ff5837;
            font-size: 0.32rem;
            font-weight: 700;
          }
        }
        .p-wly {
          margin-left: 0.3rem;
          font-size: 14px;
          font-weight: 700;
          .p-wly-ico {
            display: inline-block;
            width: 15px;
            height: 16px;
            vertical-align: middle;
            margin: 4px;
            background-repeat: no-repeat;
            background-image: url(//s5.xinstatic.com/static/newcar-www/pkg/car_z_8f1bd46.png);
            background-position: -1195px -969px;
          }
          .p-wly-l {
            color: #f85d00;
            vertical-align: middle;
          }
          .p-wly-r {
            color: #585858;
            vertical-align: middle;
          }
        }
        .info-op {
          margin: 0.25rem 0 0.2rem 0.3rem;
          .info-op-button {
            margin: 0 0.05rem;
            font-size: 18px;
            font-weight: 700;
            &:hover {
              background: #fff;
              color: #585858;
              border: 1px solid #ccc;
            }
            &.b-phone {
              border: 1px solid #ccc;
              background: #fff;
              color: #585858;
              .phone {
                background-position: -22px -61px;
                display: inline-block;
                width: 22px;
                height: 23px;
                vertical-align: -5px;
                margin-right: 8px;
              }
            }
            &.b-collection {
              background: #ffae21;
              border: 1px solid #ffae21;
              color: #fff;
              .collection {
                background-position: -22px -12px;
                display: inline-block;
                width: 22px;
                height: 23px;
                vertical-align: -5px;
                margin-right: 8px;
              }
            }
            &.b-order {
              background: #f85d00;
              border: 1px solid #f85d00;
              color: #fff;
              .order {
                background-position: -20px -203px;
                display: inline-block;
                width: 22px;
                height: 23px;
                vertical-align: -5px;
                margin-right: 8px;
              }
            }
          }
        }
        .p-top-rz {
          display: inline-block;
          height: 0.36rem;
          line-height: 0.36rem;
          font-size: 0.14rem;
          border: 1px solid #f2f2f2;
          .p-jp-bg {
            color: #907f52;
            background: #fbfaf5;
            i {
              background-position: -1196px -988px;
              background-repeat: no-repeat;
              width: 0.14rem;
              height: 0.17rem;
              display: inline-block;
              margin-right: 4px;
              position: relative;
              top: 4px;
            }
          }
          span {
            padding: 0 0.1rem;
            color: #999;
            float: left;
          }
        }
      }
    }
    .info-baomai {
      width: 12rem;
      height: 1.38rem;
      background-color: #fffdf9;
      background-image: url(//cli-sta.guazistatic.com/c2c_web/detail-baomai-bg.2ffeaea09169a930eb87472d86d22ba8.png);
      background-repeat: no-repeat;
      background-position: 100% 0;
      border: 1px solid #fcf2d5;
      margin-bottom: 0.2rem;
      justify-content: center;
      align-items: center;
      display: flex;
      .baomai-detail {
        display: inline-block;
        .left-title {
          position: relative;
          letter-spacing: 2px;
          font-size: 0.26rem;
          color: #dcb35e;
          text-align: center;
          &:before {
            position: absolute;
            width: 1.05rem;
            height: 0.06rem;
            content: "";
            display: inline-block;
            background-image: url(//cli-sta.guazistatic.com/c2c_web/detail-baomai-left.893c9eb0ca1a699ec2135ecb468eab0e.png);
            background-repeat: no-repeat;
            left: 0.5rem;
          }
          &:after {
            position: absolute;
            width: 1.05rem;
            height: 0.06rem;
            content: "";
            display: inline-block;
            right: 0.5rem;
            background-image: url(//cli-sta.guazistatic.com/c2c_web/detail-baomai-right.ba1bca8a041508201347955aeb967088.png);
            background-repeat: no-repeat;
          }
        }
        ul {
          margin-top: 0.2rem;
          text-align: center;
          li {
            display: inline-block;
            font-size: 0.18rem;
            color: #495056;
            width: 0.95rem;
            text-align: right;
            margin-right: 0.4rem;
            &::before {
              content: "";
              display: inline-block;
              width: 16px;
              height: 16px;
              background-image: url(//cli-sta.guazistatic.com/c2c_web/detail-baomai-icon.7d580d1bd8c78e0a0be5948f094621db.png);
              float: left;
            }
          }
        }
      }
    }
    .info-basic {
      .basic-title {
        height: 47px;
        line-height: 47px;
        font-size: 22px;
        color: #495056;
        border-bottom: 1px solid #e6e6e6;
        margin: 30px 0;
      }
      .basic-people {
        font-size: 0.2rem;
        color: #495056;
        width: 220px;
        padding-left: 11px;
        margin-bottom: 0.4rem;
      }
      .car-assort {
        display: flex;
        li {
          position: relative;
          flex: 1;
          text-align: center;
          color: #a5abb2;
          line-height: 24px;
          font-size: 12px;
          &:not(:last-child)::after {
            content: "";
            width: 1px;
            height: 34px;
            background-color: #e6e6e6;
            position: absolute;
            right: 0;
            top: 5px;
          }
          span {
            display: block;
            color: #495056;
            font-size: 18px;
            padding-bottom: 3px;
          }
        }
      }
      .images-list {
        display: flex;
        width: 100%;
        img:nth-child(-n + 4) {
          box-sizing: border-box;
          padding: 10px;
          width: 50%;
          height: 4rem;
        }
        img {
          box-sizing: border-box;
          padding: 10px;
          width: 33.33%;
          height: 3rem;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.viewer-footer {
  overflow: visible !important;
}
.viewer-toolbar {
  .viewer-reset,
  .viewer-play {
    display: none;
  }
  li {
    position: absolute;
    top: -4.5rem;
    &.viewer-prev {
      left: 50px;
    }
    &.viewer-next {
      right: 50px;
    }
  }
}
.viewer-list {
  height: 100px !important;
  & > li {
    height: 1rem !important;
    width: 1.5rem !important;
  }
}
.viewer-navbar {
  background-color: rgba(0, 0, 0, 0.5);
  height: 1rem;
}
</style>
